/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	DeviceEventEmitter,
	Alert,
	Image,
	TouchableOpacity,
	View
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';
import Style from './Style.js';
import Consumption from './Consumption.js';
import IncomeView from './IncomeView.js';
import MCAccountTabBar from './MCAccountTabBar.js';
const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png';
export default class InputModule extends Component {

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<View style={Style.InputModuleContainer}>
				<ScrollableTabView
					tabBarBackgroundColor='#6570e3'
					tabBarUnderlineStyle={{backgroundColor:'#FFFFFF'}}
					tabBarActiveTextColor='#FFFFFF'
					tabBarInactiveTextColor='#FFFFFF'
					textStyle={styles.textStyle}
					locked={false}
					renderTabBar={() => <MCAccountTabBar/>}>

					<View style={styles.content} tabLabel='Expense'>
						<Consumption/>
					</View>

					<View style={styles.content} tabLabel='Income'>
						<IncomeView/>
					</View>
				</ScrollableTabView>
				<Button style={styles.button} onPress={() => this.back()}>
							<Image source={require('./images/ic_back.png')} style={Style.backIcon} />
				</Button>
			</View>
		);
	}

	back(){
		// this.props.navigator.goBack();
		this.props.navigation.goBack();
	}

	componentWillUnmount(){
		DeviceEventEmitter.emit('moduleChange', 'InputModule');
	}
}

class Button extends Component {
    handlePress(e) {
        if (this.props.onPress) {
            this.props.onPress(e);
        }
    }

    render() {
        return (
            <TouchableOpacity
                onPress={this.handlePress.bind(this) }
                style={this.props.style}>
                <Text>{this.props.children}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
	content: {
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#EBEBEB',
		flex: 1
	},

	textStyle: {
		   textAlign:'center',  
	},

	button: {
        position: 'absolute',
        top: 18,
		left:18,
    },
});